<template>
  <div :class="wrapClass" style="width: 100%; height: 100%" :id="id"></div>
</template>

<script>
import { COLORS } from "@/constants";
import mixins from "./mixins";

export default {
  name: "echartLine",
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: "line",
    },
    wrapClass: String,
    option: {
      // echarts 配置项
      type: Object,
      default: () => {},
    },
    label: {
      type: Array,
      default: () => [],
    },
    legend: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getDefOptions() {
      const defOptions = {
        color: COLORS,
        toolbox: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 10,
          left: 30,
          itemGap: 20,
          icon: "rect",
          textStyle: {
            color: "#767e91",
          },

          selectorItemGap: 20,
          data: this.legend,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            show: true,
          },
          axisLabel: {
            color: "#767e91",
          },
          axisTick: {
            show: false,
          },
          data: this.label,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: 0, //一定要设置最小刻度
          max: 100, //一定要设置最大刻度
          axisLabel: {
            color: "#767e91",
            formatter: function (value) {
              return `${value}%`;
            },
          },
          splitLine: {
            lineStyle: {
              width: 1,
              type: "dotted",
            },
          },
        },
        series: this.data,
      };
      return Object.assign({}, defOptions, this.option || {});
    },
  },
  data() {
    return {
      myCharts: null,
    };
  },
  mounted() {
    const options = this.getDefOptions;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      // this.myCharts.on('legendselectchanged', (params) => {
      //   const {
      //     name
      //   } = params;
      //   // alert(`跳转到话题页: ${name}`);
      //   this.$emit('clickLegend', name);
      // })
      this.myCharts.on("click", (params) => {
        const { seriesName } = params;
        this.$emit("clickLegend", seriesName);
      });
      this.handleResize(this.myCharts);
    }
  },
  watch: {
    getDefOptions: {
      handler: function (nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  },
};
</script>
